<template>
    <div class="app-container home">
        <el-row :gutter="20">
            <el-col :sm="24" :lg="12" style="padding-left: 20px">
                <h2>校园社团管理系统</h2>
                <p>
                    为推进校园数字化建设，提升社团管理效率与服务体验，我们正式推出"校园社团管理系统"。
                    本系统致力于为全校师生打造一个集社团信息展示、成员管理、活动运营于一体的高效数字化平台。
                </p>

                <div class="feature-section">
                    <div class="feature-title">
                        <el-icon><School /></el-icon>
                        <span>对于学校/指导老师</span>
                    </div>
                    <div class="feature-list">
                        <div class="feature-item">
                            <el-icon><Check /></el-icon>
                            <span><strong>规范化管理：</strong>实现社团注册、年审、注销全流程线上化，管理有据，流程清晰。</span>
                        </div>
                        <div class="feature-item">
                            <el-icon><Check /></el-icon>
                            <span><strong>数据可视化看板：</strong>实时掌握各社团规模、活跃度、经费使用情况，为决策提供数据支持。</span>
                        </div>
                        <div class="feature-item">
                            <el-icon><Check /></el-icon>
                            <span><strong>资源统筹调配：</strong>线上完成活动场地、物资的申请与审批，资源分配更合理、更透明。</span>
                        </div>
                    </div>
                </div>

                <div class="feature-section">
                    <div class="feature-title">
                        <el-icon><UserFilled /></el-icon>
                        <span>对于社团负责人/骨干</span>
                    </div>
                    <div class="feature-list">
                        <div class="feature-item">
                            <el-icon><Check /></el-icon>
                            <span><strong>高效成员管理：</strong>一键完成招新、分群、信息通知，成员档案电子化，轻松管理社团花名册。</span>
                        </div>
                        <div class="feature-item">
                            <el-icon><Check /></el-icon>
                            <span><strong>活动全周期管理：</strong>从活动发布、报名征集到签到积分，一站式解决活动运营难题。</span>
                        </div>
                        <div class="feature-item">
                            <el-icon><Check /></el-icon>
                            <span><strong>专属宣传阵地：</strong>拥有独立的社团主页，展示风采、发布动态，吸引更多志同道合的同学。</span>
                        </div>
                    </div>
                </div>

                <div class="feature-section">
                    <div class="feature-title">
                        <el-icon><User /></el-icon>
                        <span>对于全体学生</span>
                    </div>
                    <div class="feature-list">
                        <div class="feature-item">
                            <el-icon><Check /></el-icon>
                            <span><strong>一站式探索发现：</strong>轻松浏览全校社团，快速了解社团特色，找到兴趣所在。</span>
                        </div>
                        <div class="feature-item">
                            <el-icon><Check /></el-icon>
                            <span><strong>便捷的加入体验：</strong>在线一键申请加入，报名社团活动，不错过任何精彩。</span>
                        </div>
                        <div class="feature-item">
                            <el-icon><Check /></el-icon>
                            <span><strong>个性化的成长记录：</strong>系统自动记录参与的每一次活动，生成专属的社团经历档案。</span>
                        </div>
                    </div>
                </div>

                <div class="vision-section">
                    <div class="vision-title">我们的愿景</div>
                    <p>让管理更轻松，让参与更便捷，让每一个梦想都能在社团的舞台上绽放光彩。</p>
                </div>

                <div class="stats-row">
                    <div class="stat-item">
                        <span class="stat-value">50+</span>
                        <span class="stat-label">已注册社团</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-value">2000+</span>
                        <span class="stat-label">活跃用户</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-value">150+</span>
                        <span class="stat-label">月度活动</span>
                    </div>
                </div>

                <p>
                    <b>当前版本:</b> <span>{{ version }}</span>
                </p>
            </el-col>

            <el-col :sm="24" :lg="12">
                <el-card shadow="hover" style="margin-top: 20px;">
                    <template #header>
                        <div style="display: flex; align-items: center;">
                            <el-icon><TrendCharts /></el-icon>
                            <span style="margin-left: 10px;">系统特色</span>
                        </div>
                    </template>
                    <div style="padding: 10px 0;">
                        <el-timeline>
                            <el-timeline-item timestamp="智能化管理" placement="top">
                                <el-card>
                                    <h4>AI辅助决策</h4>
                                    <p>基于大数据分析，为社团活动提供智能推荐和优化建议</p>
                                </el-card>
                            </el-timeline-item>
                            <el-timeline-item timestamp="移动端适配" placement="top">
                                <el-card>
                                    <h4>全平台支持</h4>
                                    <p>完美支持PC、平板和手机端，随时随地管理社团事务</p>
                                </el-card>
                            </el-timeline-item>
                            <el-timeline-item timestamp="安全保障" placement="top">
                                <el-card>
                                    <h4>数据加密存储</h4>
                                    <p>采用银行级加密技术，确保用户数据和隐私安全</p>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </el-card>

                <el-card shadow="hover" style="margin-top: 20px;">
                    <template #header>
                        <div style="display: flex; align-items: center;">
                            <el-icon><VideoPlay /></el-icon>
                            <span style="margin-left: 10px;">快速开始</span>
                        </div>
                    </template>
                    <div style="padding: 10px 0;">
                        <el-steps direction="vertical" :active="4">
                            <el-step title="注册账号" description="使用学号或工号完成系统注册" />
                            <el-step title="身份认证" description="根据提示完成身份验证流程" />
                            <el-step title="探索功能" description="浏览系统功能，了解各项服务" />
                            <el-step title="开始使用" description="创建或加入社团，开启精彩校园生活" />
                        </el-steps>
                        <div style="margin-top: 20px; text-align: center;">
                            <el-button type="primary" size="large">立即体验</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-divider />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import {
    School,
    UserFilled,
    User,
    Check,
    TrendCharts,
    VideoPlay
} from '@element-plus/icons-vue'

const version = ref('1.0.0')
</script>

<style scoped>
.home {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-top: 20px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

h2 {
    color: #409EFF;
    font-size: 28px;
    margin-bottom: 20px;
    font-weight: 600;
    border-left: 4px solid #409EFF;
    padding-left: 15px;
}

.intro-text {
    color: #606266;
    line-height: 1.8;
    margin-bottom: 25px;
    text-align: justify;
}

.feature-section {
    margin: 30px 0;
}

.feature-title {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: #303133;
    font-size: 20px;
    font-weight: 600;
}

.feature-title i {
    margin-right: 10px;
    font-size: 24px;
}

.feature-list {
    margin-left: 20px;
}

.feature-item {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
}

.feature-item i {
    color: #67C23A;
    margin-right: 10px;
    margin-top: 5px;
    flex-shrink: 0;
}

.vision-section {
    background: #ecf5ff;
    border-radius: 4px;
    padding: 25px;
    margin-top: 30px;
    border-left: 4px solid #409EFF;
}

.vision-title {
    color: #409EFF;
    font-size: 22px;
    margin-bottom: 15px;
    font-weight: 600;
}

.version-info {
    background: #f0f9ff;
    padding: 15px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 20px;
}

.el-divider {
    margin: 30px 0;
}

.stats-row {
    display: flex;
    justify-content: space-around;
    margin: 30px 0;
    text-align: center;
}

.stat-item {
    padding: 20px;
}

.stat-value {
    font-size: 32px;
    font-weight: bold;
    color: #409EFF;
    display: block;
}

.stat-label {
    color: #606266;
    font-size: 14px;
}

@media (max-width: 768px) {
    .app-container {
        padding: 10px;
    }

    .home {
        padding: 20px 15px;
    }

    .stats-row {
        flex-direction: column;
    }

    .stat-item {
        margin-bottom: 15px;
    }
}
</style>